<template>
	<el-dialog title="我的卡券" top="20vh" @close="close" :visible.sync="visible" width="600px" center>
		<div class="dialog-content">
			<template v-if="couponList.length">
				<div class="coupon-list">
					<el-radio-group v-model="selectedIndex">
						<div class="coupon-block flex flex-justify-between" v-for="(item,index) in couponList">
							<p>{{item.discount_ticket_name}}</p>
							<p>金额：<span class="red ">{{item.discount_ticket_price/100}}</span>元</p>
							<p>有效期至：{{item.end_time}}</p>
							<el-radio :label="index">&nbsp;</el-radio>
						</div>
					</el-radio-group>
				</div>
				<el-pagination style="margin-bottom: 0;" :current-page="this.searchData.pagenow " class="text-center" layout="prev, pager, next" prev-text="上一页" next-text="下一页"  @current-change="currentPageChange" :total="totalCount">
				</el-pagination>
			</template>
			<p v-else class="no-data">暂无合适的兑换券或抵用券</p>
		</div>

		<span slot="footer" class="dialog-footer">
			<el-button type="primary" plain @click="close">取 消</el-button>
			<el-button type="primary" @click="confirmCoupon">确 定</el-button>
		  </span>
	</el-dialog>

</template>

<script>
	import { getCookie } from '@/utils/common'
	export default {
		name: 'Coupon',//卡券弹窗
		props: ['show'],
		watch:{
			show(){
				if(this.show){
					this.getCouponList()
				}
				this.visible=this.show
			}
		},
		data() {
			return {
				visible:false,
				totalCount: 0,
				searchData: {
					ticketflag: sessionStorage.getItem('producttype'),
					credittypeflag: this.$store.state.producttype,
					type: 1,
					pagenow: 1,
					shownum: 10,
				},
				selectedIndex: 0,
				couponList: []
			}
		},
		mounted() {
			this.getCouponList()
		},
		methods: {
			getCouponList() {
				this.$request.queryCouponList(this.searchData)
					.then(res => {
						if(res.code == 0) {
							this.couponList = res.list ? res.list : []
							this.totalCount = Number(res.page?res.page.totalresult:0)
						} else {

						}
					})
			},
			currentPageChange(page) {
				this.searchData.pagenow = page
				this.getCouponList()
			},
			confirmCoupon() {
				if(this.couponList) {
					this.$emit('select', this.couponList[this.selectedIndex])
				}
				this.$emit('closeCoupon')
			},
			close() {
				this.$emit('closeCoupon')
			}
		}
	}
</script>

<style scoped lang="scss">
	>>>.el-dialog__body {
		padding: 16px 16px 24px;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
		.dialog-content {
			min-height: 300px;
			padding: 0 10px;
			border: none!important;
			.coupon-list {
				height: 300px;
				overflow-y: auto;
				.el-radio-group {
					display: block;
					.coupon-block {
						cursor: pointer;
						line-height: 40px;
						border-bottom: 1px dashed #dddddd;
						font-size: 14px;
						color: #333333;
						padding-left: 12px;
						width: 100%;
						.el-radio {
							line-height: 40px;
						}
					}
				}
			}
			.no-data {
				text-align: center;
				font-size: 16px;
				margin-top: 90px;
				color: #333;
			}
		}
	}
</style>